<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>应用列表</title>
    <style>
        html,
        body,
        ul,
        li,
        img,
        p,
        button {
            margin: 0;
            border: none;
            padding: 0;
        }
        
        ul,
        li,
        img {
            font-size: 0;
        }
        
        li {
            margin-top: 30px;
            list-style-type: none;
        }
        
        img {
            border-radius: 10px;
            width: 80px;
            height: 80px;
        }
        
        .clearfix::after {
            display: block;
            height: 0;
            content: "";
            visibility: hidden;
            clear: both;
        }
        
        #wrapper {
            margin: 200px;
            width: 500px;
            padding: 20px;
        }
        
        hr {
            margin-top: 10px;
            padding: 0;
        }
        
        .unit {
            position: relative;
            float: left;
            margin-left: 20px;
        }
        
        .unit:first-child {
            margin-left: 0;
        }
        
        .detail {
            display: none;
            z-index: 100;
            position: absolute;
            border: 1px solid #C7C4C4;
            top: -155px;
            right: -215px;
            font-size: 14px;
        }
        
        .detail-top {
            position: relative;
            padding: 5px;
            width: 240px;
            height: 60px;
            background-color: #C6CDDB;
        }
        
        .detail-top p {
            position: absolute;
            bottom: 10px;
            font-size: 14px;
        }
        
        .add {
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translate(0, -50%);
            background: transparent;
            font-size: 0;
            outline: none;
            cursor: pointer;
        }
        
        .add img {
            width: 40px;
            height: 40px;
        }
        
        .detail-middle {
            width: 230px;
            height: 60px;
            padding: 10px;
            background-color: #fff;
        }
        
        .detail-middle p,
        .detail-bottom p {
            font-size: 14px;
        }
        
        .detail-bottom {
            width: 250px;
            height: 10px;
            background-color: #B4AEAE;
        }
        
        .triangle {
            position: absolute;
            left: 40px;
            bottom: -10px;
            border: 0;
            width: 0;
            height: 0;
            border-top: 10px solid #B4AEAE;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <p>最新上线</p>
        <hr>
        <ul id="appList">
            <li class="clearfix">
                <div class="unit">
                    <img src="./img/1.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/2.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/3.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/4.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/5.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
            </li>
            <li class="clearfix">
                <div class="unit">
                    <img src="./img/6.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/7.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/8.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/9.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
                <div class="unit">
                    <img src="./img/10.jpg" alt="">
                    <div class="detail clearfix">
                        <div class="detail-top">
                            <strong>搜狐汽车图库</strong>
                            <p>生活</p>
                            <button class="add"><img src="./img/add.png" alt=""></button>
                        </div>
                        <div class="detail-middle">
                            <p>中国国庆中秋黄金周8天长假已经过去，在“萨德”影响下，中国团体游客数量仍然为零。
                            </p>
                        </div>
                        <div class="detail-bottom"></div>
                        <span class="triangle"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script>
        function getElementByClass(className) {
            var objArray = new Array();
            var tags = document.getElementsByTagName('*');
            var index = 0;
            for (var i in tags) {
                if (tags[i].nodeType == 1 && tags[i].getAttribute('class') == className) {
                    objArray[index] = tags[i];
                    index++;
                }
            }
            return objArray;
        }

        var apps = getElementByClass('unit');
        for (var i in apps) {
            apps[i].onmouseenter = function() {
                this.getElementsByTagName('div')[0].style.display = 'block';
            };
            apps[i].onmouseleave = function() {
                this.getElementsByTagName('div')[0].style.display = 'none';
            }
        }
    </script>
</body>

</html>